<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
    <title>slot插槽</title>
    <style>
        [v-cloak] {
            display: none;
        }

        .button {
            width: 80px;
            height: 25px;
            background-color: #FF00FF;
            border: 0 none;
            border-radius: 4px;
            color: #FFFFFF;
            outline: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak></div>
    <script src="js/vue.js"></script>
    <script>
        let ButtonComponent = {
            template: `
          <button :type="type" class="button"><slot></slot></button>
        `,
            data() {
                return {

                }
            },
            methods: {

            },
            props: {
                type: {
                    type: String,
                    default: "button"
                }
            }
        };
        let Mydiv = {
            template: `
            <div><slot></slot></div>
        `,
            mounted() {
                this.$slots.default[0].elm.innerHTML = "abcd"
                console.log(this.$slots.default[0].elm.offsetWidth);
            }
        };
        //b组件
        let Bcomponent = {
            template: `
           <div>
                <my-button>按钮1</my-button>
                <form action="http://www.baidu.com" target="_blank">
                    <my-button type="submit">提交2</my-button>
                </form>

                <Mydiv>
                    <div class="a" style="width:100px;">aaaa</div>
                    <div class="b">bbbbb</div>
                </Mydiv>

           </div>
        `,
            data() {
                return {

                }
            },
            created() {

            },
            components: {
                "my-button": ButtonComponent,
                Mydiv
            }
        };
        //入口组件
        let App = {
            template: `
        <div>
            <Bcomponent></Bcomponent>
        </div>
      `,
            //局部组件注册方式
            components: {
                Bcomponent
            }
        };
        new Vue({
            el: "#app",
            template: `
                <App></App>
        `,
            components: {
                App
            }
        })
    </script>
</body>

</html>